<template>
	<view>
		<!-- 设备概况 -->
		<view class="box">
			<view class="title">
				设备概况
			</view>
			<view class="data-list">
				<view class="data-info" v-for="eq in eqInfoDataList" :key="eq.id"
					@click="gotoEqList(eq.useType,eq.eqType)">
					<view class="num-box" :style="eq.color?`color:${eq.color}`:''">
						{{eq.num}}<text class="num-text">台</text>
					</view>
					<view class="info-title">
						{{eq.title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 备件库概况 -->
		<view class="box">
			<view class="title">
				备件库概况
			</view>
			<view class="data-list">
				<view class="data-info" v-for="part in partDataList" :key="part.id" @click="gotoPartList(part.type)">
					<view class="num-box" :style="part.color?`color:${part.color}`:''">
						{{part.num}}
					</view>
					<view class="info-title">
						{{part.title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 工单任务概况 -->
		<view class="box">
			<view class="title">
				工单任务概况
				<!-- <text class="sy">(近三月)</text> -->
			</view>
			<view class="data-list">
				<view class="data-info" v-for="work in workTaskDataList" :key="work.id" @click="gotoGdList(work.type)">
					<view class="num-box" :style="work.color?`color:${work.color}`:''">
						{{work.num}}
					</view>
					<view class="info-title">
						{{work.title}}
					</view>
				</view>
			</view>
		</view>
		<!-- 饼状图 -->
		<view class="maintenanceCharts">
			<view class="subsection ">
				<u-subsection :list="maSectionList" :current="maSectionCurrent" mode="subsection"
					active-color="#0F53AC" inactiveColor="#0F53AC" :fontSize="'28rpx'" height="54"
					@change="sectionChange"></u-subsection>
			</view>
			<maintenanceCharts :current="maSectionCurrent"></maintenanceCharts>
		</view>
		<!-- 设备故障统计-折线图 -->
		<view class="line-box">
			<view class="line-title">
				设备故障统计<text class="sy">(年度)</text>
			</view>
			<equipmentCharts :showCharts="showCharts"></equipmentCharts>
		</view>
		<view style="height: 32rpx;background: #fff;"></view>
	</view>
</template>

<script>
	import maintenanceCharts from "./components/maintenanceCharts.vue"
	import equipmentCharts from "./components/equipmentCharts.vue"
	export default {
		components: {
			maintenanceCharts,
			equipmentCharts
		},
		data() {
			return {
				//设备概况的dataList
				eqInfoDataList: [{
						title: '设备总数',
						num: '0',
						color: 'rgba(2, 173, 130, 1)',
						useType: 0,
						eqType: '',
						id: '2023051001'
					},
					{
						title: '维修中设备',
						num: '0',
						color: 'rgba(250, 183, 15, 1)',
						useType: 0,
						eqType: 2,
						id: '2023051002'
					},
					{
						title: '维保中设备',
						num: '0',
						color: 'rgba(252, 119, 10, 1)',
						useType: 0,
						eqType: 3,
						id: '2023051003'
					},
					{
						title: '点检中设备',
						num: '0',
						color: 'rgba(25, 98, 224, 1)',
						useType: 0,
						eqType: 4,
						id: '2023051004'
					},
					{
						title: '停用设备',
						num: '0',
						color: 'rgba(0, 186, 173, 1)',
						useType: 1,
						eqType: '',
						id: '2023051005'
					}
				],
				//备件库概况的dataList
				partDataList: [{
						title: '备件总数',
						num: '0',
						color: 'rgba(2, 173, 130, 1)',
						type: 'all',
						id: '2023051006'
					},
					{
						title: '备件申请数',
						num: '0',
						color: 'rgba(250, 183, 15, 1)',
						type: 'examineAlert',
						id: '2023051007'
					},
					{
						title: '备件退还数',
						num: '0',
						color: 'rgba(252, 119, 10, 1)',
						type: 'giveBackAlert',
						id: '2023051008'
					},
					{
						title: '备件库存预警',
						num: '0',
						color: 'rgba(25, 98, 224, 1)',
						type: 'inventoryAlert',
						id: '2023051009'
					},
					{
						title: '备件过期预警',
						num: '0',
						color: 'rgba(0, 186, 173, 1)',
						type: 'expirationAlert',
						id: '2023051010'
					}
				],
				//工单任务概况的dataList
				workTaskDataList: [{
						title: '待维修工单',
						num: '0',
						color: 'rgba(2, 173, 130, 1)',
						type: 'repairAlert',
						id: '2023051011'
					},
					{
						title: '待维保任务',
						num: '0',
						color: 'rgba(250, 183, 15, 1)',
						type: 'maintenanceAlert',
						id: '2023051012'
					},
					{
						title: '待点检任务',
						num: '0',
						color: 'rgba(252, 119, 10, 1)',
						type: 'spotCheckAlert',
						id: '2023051013'
					},
				],
				//饼状图标题显示list
				maSectionList: [{
						name: '维修来源占比'
					},
					{
						name: '维保类型占比'
					},
					{
						name: '点检类型占比'
					},
				],
				maSectionCurrent: 0, //选择的当前标题
				maSectionpath: '/device/mobile/deviceRepair/pieChartCensus', //传给病状图的路径
				showCharts:true,
			}
		},
		onLoad() {
			//1.设备概况的数据
			this.getDeviceCountByStatus()
			//备件库概况的数据
			this.getPartStatistics()
			//工单任务概况的数据
			this.getOrderTaskCount()
			uni.$on('handleShowCharts', (val) => {
				this.showCharts=!val
			})
		},
		methods: {
			//设备概况相关方法 ------start
			//1.跳转至设备清单详情
			gotoEqList(usetype, eqType) {
				uni.navigateTo({
					url: '/pages/subPackagesC/equipmentList/index?useType=' + usetype + '&eqType=' + eqType
				})
			},
			//设备概况相关方法 ------end

			//备件库概况相关方法 ------start
			//1.跳转备件
			gotoPartList(type) {
				//备件库存
				if (type === 'all') {
					uni.reLaunch({
						url: '/pages/subPackagesB/bjlist/beijianList'
					})
				}
				//备件审核
				if (type === 'examineAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/examineAlert'
					})
				}

				//备件退还
				if (type === 'giveBackAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/giveBackAlert'
					})
				}

				//备件库存预警
				if (type === 'inventoryAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/inventoryAlert'
					})
				}
				//备件过期预警
				if (type === 'expirationAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/expirationAlert'
					})
				}
			},
			//备件库概况相关方法 ------end
			//工单任务概况相关方法 ------start
			gotoGdList(type) {
				// 待维修列表
				if (type === 'repairAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/repairAlert'
					})
				}
				// 待维保任务
				if (type === 'maintenanceAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/maintenanceAlert'
					})
				}
				// 待点检任务
				if (type === 'spotCheckAlert') {
					uni.navigateTo({
						url: '/pages/subPackagesA/statisticsData/spotCheckAlert'
					})
				}
			},
			//工单任务概况相关方法 ------end
			//饼状图相关方法 ------start
			//1.切换标题
			sectionChange(index) {
				this.maSectionCurrent = index;
			},
			//饼状图相关方法 ------end


			//这里是获取各种数据的接口
			//1.设备概况的数据接口
			getDeviceCountByStatus() {
				uni.$u.http.get(`/device/mobile/deviceInfo/getDeviceCountByStatus`).then(res => {
					if (res.code == 0) {
						const data = res.data
						this.eqInfoDataList.forEach(item => {
							switch (item.title) {
								case '设备总数':
									item.num = data.totalCount
									break;
								case '维修中设备':
									item.num = data.repairCount
									break;
								case '维保中设备':
									item.num = data.maintainCount
									break;
								case '点检中设备':
									item.num = data.checkCount
									break;
								case '停用设备':
									item.num = data.stopCount
									break;
							}
						})
					}
				}).catch(err => {
					uni.$u.toast(err.message)
				})
			},
			//2.备件库概况的数据接口
			getPartStatistics() {
				uni.$u.http.get(`/device/mobile/devicePart/partStatistics`).then(res => {
					if (res.code == 0) {
						const data = res.data
						this.partDataList.forEach(item => {
							switch (item.title) {
								case '备件总数':
									item.num = data.partNum
									break;
								case '备件申请数':
									item.num = data.applyNum
									break;
								case '备件退还数':
									item.num = data.refundNum
									break;
								case '备件库存预警':
									item.num = data.safeNum
									break;
								case '备件过期预警':
									item.num = data.warn_num
									break;
							}
						})
					}
				}).catch(err => {
					uni.$u.toast(err.message)
				})
			},
			//3.工单任务概况的数据接口
			getOrderTaskCount() {
				uni.$u.http.get(`/device/mobile/deviceInfo/getOrderTaskCount`).then(res => {
					if (res.code == 0) {
						const data = res.data
						this.workTaskDataList.forEach(item => {
							switch (item.title) {
								case '待维修工单':
									item.num = data.repairCount
									break;
								case '待维保任务':
									item.num = data.maintainCount
									break;
								case '待点检任务':
									item.num = data.checkCount
									break;
							}
						})
					}
				}).catch(err => {
					uni.$u.toast(err.message)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 242, 242, 1);
	}

	.box {
		background: #fff;
		padding: 32rpx;
		border-bottom: 16rpx solid rgba(242, 242, 242, 1);

		.title {
			font-size: 16px;
			font-weight: 500;
			color: #2B2B2B;
			margin-bottom: 16rpx;
		}

		.data-list {
			display: flex;
			justify-content: start;
			align-items: center;
			flex-wrap: wrap;
		}

		.data-info {
			width: 33%;
			font-size: 28rpx;
			color: rgba(112, 112, 112, 1);
			height: 152rpx;
			// margin-bottom: 16rpx;

			.num-box {
				height: 112rpx;
				line-height: 112rpx;
				color: rgba(77, 77, 77, 1);
				text-align: center;
				font-size: 48rpx;
				font-weight: 700;

				.num-text {
					font-size: 28rpx;
					color: rgba(77, 77, 77, 1);
				}
			}

			.info-title {
				height: 40rpx;
				line-height: 28rpx;
				font-size: 14px;
				font-weight: 400;
				color: #666666;
				width: 170rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
	}

	.maintenanceCharts {
		background-color: #fff;
		border-bottom: 16rpx solid rgba(242, 242, 242, 1);

		.subsection {
			padding: 32rpx;
			border-bottom: 1px solid #F2F2F2;
		}
	}

	.line-box {
		background-color: #fff;

		.line-title {
			// height: 100rpx;
			// line-height: 100rpx;
			padding: 32rpx;
			font-size: 32rpx;
			color: #2B2B2B;
			// border-bottom: 1px solid rgba(242, 242, 242, 1);
		}
	}
	
	.sy{
		color: #A6A6A6;
		font-size: 14px;
		margin-left: 10rpx;
	}
</style>